// Vars 
@page-width: 900px;


body { 
	background-color: #EEE; color: #333;
	font-family: 'Trebuchet MS';
	font-size: 13px; 

	a {
		color: #06F;
		text-decoration: none;
		&:hover {
			cursor: pointer;
		}
	}
	
	h1, h2, h3, h4, h5, h6 {
		margin: 5px 0px;
		padding: 0px;
	}
}

#page  
{
    background-color: #FFF;
    //border: solid 1px #999;
	margin: 0px auto;
	padding: 10px;
    width: @page-width;

	#header {
		border-bottom: solid 2px #000;
		min-height: 80px;
		margin: 10px auto;
		
		.menu {
			.piped_list(10px);
			display: table;
			float: right;
			margin-top: 60px;
			li {
				
				a {
					font-weight: bold;
				}
			}
			 
		}
		.logo { min-height: 100px; }
	}

	#content-container {
		min-height: 400px;
		padding: 0px 10px;
		
		#home-content {
			
		} 
		
		#portfolio-content {
			h2 {
			}
			
			h3 {
				//border-bottom: 3px solid #DD4B39;
				color: #DD4B39;
				display: table;
				font-size: 18px;
				width: 100%;
			}
			ul {
				.inline_list;
				display: table;
				
				li {
					a {
						.rounded-corners(5px);
						border: solid 1px #CCC;
						display: table-cell;
						float: left;
						height: 150px;
						margin: 10px;
						width: 270px;
					}
				}
			}
		}
		
		#portfolio-detail-content {
			display: table;
			position: relative;
			width: 100%; 
			
			.project_description {
				display: table-cell;
				text-align: justify;
			}
			
			.screenshot_thumbs {				
				img {
					margin-bottom: 15px;
				}
			}
			
			.screenshot_thumb {
								
				&.main {
					img {
						float: left;
						margin-right: 10px;
					}
				}
			}
		}
		
		#projects-content {
			ul {
				.inline_list;
				li {
					display: block;
					margin-bottom: 20px;
					a {
						font-size: 16px;
						font-weight: bold;
						margin-left: 100px;
					}
				}
			}
		}
		
		#portfolio-large-photo {
			
			.project_heading {
				
				display: table;
				margin-bottom: 20px;
				width: 100%;
			
				&>* {
					display: table-cell;
					float: left;
					text-align: justify;
					width: 50%;
				}
			}
			.photo_view {
				margin-top: 20px;
				
				img {
					display: table;
					height: auto;
					margin: 0px auto;
					width: 100%; 
				}
			}
		}
		
	}
}

#footer {
	.piped_list(5px);
	//border-top: 1px solid #CCC;
	margin-left: 5px;
	min-height: 90px;
	text-align: center;
	text-transform: uppercase;
	
	a {
		color: #777;
	}
}
   
.rounded-corners-i (@top: 5px, @right: 5px, @bottom: 5px, @left: 5px) {
	border-radius: @top @right @bottom @left;
	-webkit-border-radius: @top @right @bottom @left;
	-moz-border-radius: @top @right @bottom @left;
}

.rounded-corners (@radius: 5px) {
	border-radius: @radius;
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
}

ul.nav_menu {	
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-align: right;

	.nav_menu_item { 
		display: inline;
		margin-right: 10px;
		position: relative;

		a { color: #06F; font-weight: bold; }

		&:hover {
			.nav_menu { 
				display: block; 
			}
		}

		.nav_menu {
			.rounded-corners-i(0px 0px 5px);
			.transparent(50);
			border: solid 1px;
			background-color: #06F;
			display: none;
			padding-left: 10px;
			position: absolute;
			text-align: left;
			top: 20px;
			width: 200px;

			.nav_menu_item {
				display: block;
				margin: 5px 0px;
				a { color: #FFF; }
			}
		}
	}
}

.transparent(@val) {
	opacity: @val/100;
	filter: alpha(opacity=@val);
}

.inline_list {
	list-style: none;
	margin: 0px;
	padding: 0px;
	
	li {
		display: inline;
	}
}

.piped_list(@spacing: 10px) {
	li {
		margin-right: @spacing;
		a {
			margin-right: @spacing;
		}
		
		&:after {
			content: '|';
		}
		
		&:last-child {
			&:after {
				content: '';
			}
		}	
	}
}

.button {
	.rounded-corners();
	background-color: #06F;
	color: #FFF;
	font-weight: bold;
	padding: 5px 10px;
}

@x: -15px;
.navigable
{
	padding: 0px 45px;
	position: relative;
	
	.control {
		.rounded-corners(5px);
		background: center no-repeat;
		height: 100%;
		overflow: hidden;
		position: absolute;
		text-indent: -999px;
		top: 0px;
		width: 40px;
		
		&:hover {
			background-color: #EEE;
		}
		
		&.previous {
			background-image: url(../img/prev_arrow.png);
			left: @x;
		}
		
		&.next {
			background-image: url(../img/next_arrow.png);
			right: @x;
		}
	}
}